<template>
<div>
	<ol class="breadcrumb">
      <li class="breadcrumb-item">反馈管理</li>
      <li class="breadcrumb-item">反馈征集列表</li>
    </ol>
    <div class="biaoqing-container">
    	<div 
    	  @click="setStaus('0')"
          class="btn cursor btn-outline-primary btn-sm mt-2" 
          :class="{'active':status=='0'}"
        >处理中</div>

        <div 
        	@click="setStaus('1')"
          class="btn cursor btn-outline-primary btn-sm ml-2 mt-2"
          :class="{'active':status=='1'}"
        >已处理</div>

    	<div class="biaoqing-table">
			<table class="table table-bordered table-hover">
				<thead>
		    		<tr>
				      <th>内容</th>
				      <th>管理员回复</th>
				      <th>来源</th>
				      <th style="width:100px;">提交用户</th>
				      <th>提交时间</th>
				      <th>联系方式</th>
				      <th>处理</th>
				      <th>操作</th>
				    </tr>
		    	</thead>
		    	<tbody>
		    		<tr v-for="(feed,index) in feedback.items" >
		    			<td :title="feed.subContent" class="max-width100">{{feed.subContent}}</td>
		    			<td :title="feed.replyContent" class="max-width100">{{feed.replyContent}}</td>
		    			
		    			<td :title="feed.device" class="max-width100">
		    				{{feed.device}}
		    			</td>
		    			<td class="">
		    				<router-link v-if="feed.user" :to="'/userdetail/'+feed.user.id">
			    				<span class="user-tx mr-1"><img :src="feed.user.fullAvatar"></span>
			    				<span class="overflow" style="max-width:150px;display:inline-block;">{{feed.user.name}}</span>
		    				</router-link>
		    			</td>
		    			<td :title="feed.createTime" class="max-width50">
		    				{{feed.createTime}}
		    			</td>
		    			<td class="max-width50">
		    				{{feed.contacts}}
		    			</td>
		    			<td>
		    				<span v-if="feed.status===0"  @click="noEdit(feed.id,index)" class="text-danger cursor">不做处理</span>
		    				<span v-else class="text-success">已处理</span>
		    			</td>
		    			<td><span @click="replay(feed.id,index)" class="text-success cursor">回复</span></td>
		    		</tr>
		    	</tbody>
			</table>
			<Pagepublic :pages="feedback" @paging="goFeedback"></Pagepublic>
	    </div>
    </div>
</div>
</template>
<script>
import { TopicManage,http } from '../../resources'
import { viewImg, clearViewImg,formatTime } from '../../misc/utils'
import toastr from '../../misc/toastr.esm'
import Pagepublic from '../../widgets/pagepublic.vue'
import swal2 from 'sweetalert2'
import querystring from 'querystring'

export default {
	data: () => ({
		loading: false,
		feedback:'',
		formPage:'',
		status:0
	}),
	beforeRouteEnter (to,form,next) {
		next(vm => {
			var params ={
				pageSize:15,
				pageNum:1,
				status:0
			}

			vm.$http.get('/feedback',{params:params}).then(response => {
				for(var i = 0;i<response.data.data.items.length;i++){
					response.data.data.items[i].createTime=formatTime(response.data.data.items[i].createTime)
				}
		        vm.feedback=response.data.data;
		    })
		})
	},
    mounted () {
     	this.$emit('loaded')
    },
    methods: {
    	setStaus(status){
    		this.status = status;
    		this.goFeedback(1)
    	},
    	noEdit(id,index){
    		var $this = this;
    		var feedback =this.feedback;
    		var opt = {
    			id:id,
    			status:2
    		}
    		var params=querystring.stringify(opt)
    		$this.$http.put('/feedback',params).then(response => {
              if(response.data.code==200){
              	feedback.items[index].status =opt.status
                $this.$notice.success(response.data.msg)
              }else{
              	$this.$notice.error(response.data.msg)
              }
            })
    	},
    	replay(id,index){
    		var $this = this;
    		var params ={
				id:id,
				status:1
			}
			var feedback =this.feedback;
    		swal2({
	          title: '请输入回复消息！',
	          text:'谨慎操作！',
	          input: 'text',
	          showCancelButton: true,
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          showLoaderOnConfirm: true,
	          reverseButtons:true,
	          preConfirm: function (text) {
	            return new Promise(function (resolve,reject) {
	                  if (text != '') {
	                  	params.replyContent=text;
	                    params=querystring.stringify(params)
	                    $this.$http.put('/feedback',params).then(response => {
	                    	
	                      if(response.data.code==200){
	                      	feedback.items[index].status = params.status;
	                        $this.$notice.success('回复成功')
	                      }else{
	                      	$this.$notice.success(response.data.msg)
	                      }
	                    })
	                    swal2.close()
	                  } else {
	                    reject('请输入回复消息！')
	                  }

	              })
	          },
	        }).catch(swal2.noop)
    	},
    	goFeedback(page){
    		this.$emit('loaded',true)
			var params ={
				pageSize:15,
				pageNum:page,
				status:this.status
			}
			http.get('/feedback',{params:params}).then(response => {
				this.$emit('loaded',false);
				for(var i = 0;i<response.data.data.items.length;i++){
					response.data.data.items[i].createTime=formatTime(response.data.data.items[i].createTime)
				}
				this.status = params.status;
		        this.feedback=response.data.data;
		    })
    	}
    },
    components:{Pagepublic}
}
</script>
<style>
.user-tx{
	display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 100%;
}
.user-tx img{
	border-radius: 100%;
    width: 100%;
    height: 100%;
}
</style>